<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content  pd-30">
			<!-- 			<view class="progress_box bd-r40 pd-20">
				<view class="progress_bar_box">

					<view class="ft-28 c-33 fw-800">
						{{ '售后进度：'+detail.info.status }}
					</view>
					<view class="progress_bar_log flex mt-20">
						<image class="logs bd-r50c" :src="detail.info.user_info.avatar" mode="aspectFill">
						</image>
						<view class="text ml-10">
							<view class="ft-28 c-33 fw-800">{{ detail.info.user_info.nickname }}</view>
							<view class="ft-24 c-99">{{ detail.info.created_at }}</view>
						</view>
					</view>

					<view class="progress_bar_msg mt-20">
						<view class="msg bd-r20 pd-20 ">
							<view class="progress_bar_content ft-24">
								<view class="tip  c-33 fw-800">
									{{ '服务进度' }}
								</view>
								<view class="text c-66">
									<view v-html="detail.info.last_progress_txt"></view>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view> -->

			<view class="list_box pd-20 bd-r40" :class="{ 'mt-20': index > 0 }"
				v-for="(item, index) in orderProgressList">
				<view class="ft-28 c-33 fw-800 ">
					{{ '售后进度：' + item.name }}
				</view>


				<view class="list_item bd-r20 pd-20 mt-20">
					<image class="logs bd-r40" :src="item.user_info.avatar" mode="aspectFill">
					</image>
					<view class="right_box ml-20 te-wid  c-33">
						<view class="title te-1 ft-28 fw-800">
							{{ item.user_info.nickname }}
						</view>
						<view class="c-99 ft-24 te-1 time">
							{{ item.created_at }}
						</view>
					</view>
				</view>
				<view class="view bd-r40">
					<view class="list_messge">
						<!-- <view class="ft-24 c-33 flex-bwt">
							<span class="fw-800">申诉内容</span>
							<span class="c-99 fw-400">{{ item.created_at }}</span>
						</view> -->
						<view class="text ft-24 c-66 mt-10">
							<view v-html="item.content"></view>
						</view>
						<view class="imgList flex mt-20" v-if="item.images && item.images.length > 0">
							<template v-for="(i, ind) of item.images" :key="i">
								<image class="imgs bd-r20" @click="openImg(ind, item.images)" :src="i"
									mode="aspectFill" />
							</template>
						</view>
					</view>
				</view>

			</view>


			<!-- 占位 -->
			<view style="height: 160rpx;">

			</view>
		</view>
		<view class="bottom">

			<view class="btn active" @click="openPop">
				补充申诉
			</view>
		</view>

	</view>
	<!-- 售后原因弹窗 -->
	<up-popup :show="showPop" mode="bottom" :round="20">
		<view class="boxView">
			<view class="title flex-bwt">
				<view class="">
					<view class="ft ft-32 c-33 fw-800">{{ '补充申诉' }}</view>
				</view>
				<image class="icon deg-90" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
					mode="aspectFill" @click="closePop">
				</image>
			</view>
			<view class="describe_box bd-r20">
				<!-- <text class="ft-24 c-33 fw-800">输入申请描述</text> -->

				<textarea class="textarea bd-r20" maxlength="-1" v-model="text" placeholder="请输入内容"
					placeholder-class="textarea-placeholder" @input="" />
				<view class="img_model bd-r20 mt-20 pd-20">
					<text class="ft-24 c-99">添加图({{ fileList.length || 0 }}/{{ maxLength }})</text>
					<view class="imgBox flex mt-10">
						<!-- 图片列表 -->
						<view class="img_list flex">
							<view class="imgItem" v-for="(item, index) in fileList.slice(0, 5)" :key="index">
								<image class="imgs  bd-r20" :src="item.url"
									@click="openImg(index, fileList.map(f => f.url))" mode="aspectFill" />
								<image class="icon_samll icons"
									src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit"
									@click="deleteImg(index, item)" />
							</view>
						</view>
						<u-upload @afterRead="afterRead" v-if="fileList.length < 5" name="6" multiple :maxCount="5">
							<view class="imgUpload flex-center">
								<image class="icon_samll deg-90"
									src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png" mode="aspectFit">
								</image>
							</view>
						</u-upload>
					</view>

				</view>

			</view>
			<view class="btn_box flex-center pd-20">
				<view class="btn bd-r20" @click="sub">提交</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
const headData = reactive({
	color: '#fff',
	title: '售后服务进度'
})
const option = reactive({
	html: `售后`,
	title: '确定要撤回售后吗？',
})

const fileList = ref([])
// 删除图片
const deleteImg = (index, item) => {
	fileList.value = fileList.value.filter((f, i) => i !== index)
}
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
// 新增图片
const maxLength = ref(5)
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	lists = lists.slice(0, maxLength.value - fileList.value.length)
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = lists[i];
		fileList.value.push({
			...item,
			status: 'success',
			message: '',
			url: result,
		});
	}
};

const uploadFilePromise = (url) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: utils.domain + '/api/v1/button.uploadImage',
			filePath: url,
			name: 'image',
			fileType: 'image',

			formData: {
				app_id: utils.app_id,
				identity: utils.identity,
			},
			header: {
				// 'content-type': 'multipart/form-data',
				'Authorization': utils.getToken()
			},
			success: (res) => {
				const resData = JSON.parse(res.data)
				resolve(resData.data.info.url);
			},
		});
	});
};
const showPop = ref(false)
const closePop = () => {
	showPop.value = false
	fileList.value = []
	text.value = ''
}
const openPop = () => {
	showPop.value = true
}

const detail = ref({})
const id = ref('')
onLoad(option => {
	id.value = option.id
	// utils
	// 	.request(
	// 		api.getRefundDetail, {
	// 			id: option.id
	// 		},
	// 		"get"
	// 	)
	// 	.then((res) => {
	// 		detail.value = res.data
	// 	});
	getListData()
})

const reloadData = () => {
	orderPage.value = 1
	orderProgressList.value = []
	orderLoading.value = true
	getListData()
}

const orderPage = ref(1)
const orderProgressList = ref([])
const orderLoading = ref(true)
const getListData = () => {
	if (!orderLoading.value) {
		return
	}
	uni.showLoading()
	orderLoading.value = false
	utils
		.request(
			api.getRefundProgressList, {
			page: orderPage.value,
			pageSize: 10,
			refund_id: id.value
		},
			"get"
		)
		.then((res) => {
			orderPage.value++
			if (res.data.items.length > 0) {
				orderProgressList.value = orderProgressList.value.concat(res.data.items)
			}
			if (orderPage.value <= res.data.pageInfo.totalPage) {
				orderLoading.value = true
			}
			uni.hideLoading()
		});
}

const text = ref('')
const sub = () => {
	const formData = {}
	formData.refund_id = id.value
	formData.content = text.value
	formData.images = fileList.value.map(item => {
		return item.url
	})
	utils
		.request(
			api.subRefundProgress, formData,
			"post"
		)
		.then((res) => {
			reloadData()
			closePop()
		});
}
</script>

<style lang="scss" scoped>
.content {

	.logs {
		width: 68rpx;
		height: 68rpx;

	}

}


.progress_box {
	background-color: #F8F8F8;

	.progress_bar_box {
		.progress_bar_text {
			.active {
				color: #333;
				font-weight: 800;
			}
		}

		.progress_bar_log {
			border-top: 2rpx solid #F1F1F1;
			padding: 20rpx 0;

		}

	}

	.progress_bar_msg {
		.msg {
			background-color: #fff;
		}

	}
}

.list_box {
	background-color: #F8F8F8;

	.view {
		background: linear-gradient(to top, #fff, #f8f8f8b6);

	}

	.list_item {
		border-top: 2rpx solid #F1F1F1;
		padding: 20rpx 0;
		display: flex;

		.time {
			margin-top: 5rpx;
		}

		.imgs {
			width: 142rpx;
			height: 174rpx;
			flex-shrink: 0;
		}
	}

	.list_messge {
		padding: 0 20rpx 20rpx;
	}

	.imgList {
		flex-wrap: wrap;
		gap: 20rpx;

		.imgs {
			width: 106rpx;
			height: 136rpx;
			flex-shrink: 0;
		}
	}

	.list_detail {
		&_item {
			padding: 10rpx 0;

			.btn {
				background-color: #F1F1F1;
				padding: 10rpx;
				border-radius: 8rpx;
				color: #666;
			}
		}
	}

}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 160rpx;
	display: flex;
	align-items: start;
	justify-content: flex-end;
	background-color: #F8F8F8;

	.btn {
		height: 78rpx;
		width: 192rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: #F1F1F1;
		border-radius: 20rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;

	}

	.active {
		background-color: #333;
		color: #fff;
	}
}

.boxView {
	min-height: 800rpx;
	background-color: #F8F8F8;
	border-radius: 40rpx 40rpx 0 0;

	.title {
		padding: 40rpx 40rpx 0;

		.icon {
			width: 36rpx;
			height: 36rpx;
		}
	}


	.describe_box {
		// background-color: #F8F8F8;
		padding: 20rpx 40rpx;

		.textarea {
			width: 100%;
			height: 500rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666;

			.textarea-placeholder {
				font-size: 28rpx;
				color: #999;
				// padding: 20rpx;
			}
		}

		.img_model {
			background-color: #fff;
			// background-color: red;

			.imgBox {
				.img_list {
					flex: 1;
					gap: 20rpx;
					box-sizing: border-box;

					.imgItem {
						.imgs {
							width: 110rpx;
							height: 142rpx;
						}

						width: 110rpx;
						height: 142rpx;
						position: relative;

						.icons {
							position: absolute;
							right: 5rpx;
							top: 5rpx;
						}
					}
				}

				.imgUpload {
					width: 110rpx;
					height: 142rpx;
					border-radius: 20rpx;
					border: 2rpx dashed #333;

				}

				:deep(.u-upload) {
					flex: 0;
				}
			}

		}



	}

	.btn_box {
		background-color: #F8F8F8;
		border-top: 2rpx solid rgb(235, 235, 235);

		.btn {
			width: 60%;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			background-color: #333;
			color: #DBF046;
		}
	}

}
</style>